<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>v-for</title>
</head>

<body>
    <div id="app">
        <div>循环数组</div>
        <ul>
            <li v-for="item in fruits">{{item}}</li>
            <li v-for="(item, index) in objects" :key="item.id">
                {{item.name}}-----{{index}}----{{item.age}}-----{{item.id}}
            </li>
        </ul>
    </div>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                fruits: ['apple', 'orange', 'banana'],
                objects: [
                    {
                        id: 1,
                        name: 'george',
                        age: 18
                    },
                    {
                        id: 2,
                        name: 'tony',
                        age: 20
                    },
                    {
                        id: 3,
                        name: 'lili',
                        age: 22
                    },
                ]
            }
        });
    </script>
</body>

</html>